<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<view class="box">
					<uni-forms-item required label="选择楼栋" name="building_id">
						<picker @change="bindBuild" :range="build" range-key="building_name">
							<view class="picker-input">
								{{ building_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="所在层数" name="floor_no">
						<uni-number-box v-model="FormData.floor_no" :min="1" :max="99" @change="bindFloor" />
					</uni-forms-item>
					<uni-forms-item required label="房间数" name="number">
						<uni-number-box v-model="FormData.number" :min="1" :max="99" @change="bindNumber" />
					</uni-forms-item>
				</view>
				<view class="box small">
					<view class="roomNo">
						<view class="label">房间号</view>
						<view class="value">
							{{ FormData.floor_rooms_no }}
						</view>
					</view>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			building_name: '',
			FormData: {
				building_id: '',
				floor_no: 1,
				floor_rooms_no: '101',
				number: 1
			},
			build: [],
			rules: {
				building_id: {
					rules: [
						{
							required: true,
							errorMessage: '请选择楼栋'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onShow() {
		this.getBuild();
	},
	methods: {
		bindBuild(e){
			this.FormData.building_id = this.build[e.detail.value].id;
			this.building_name = this.build[e.detail.value].building_name;
		},
		bindFloor(num) {
			this.FormData.floor_no = num;
			this.setRoom();
		},
		bindNumber(num) {
			this.FormData.number = num;
			this.setRoom();
		},
		setRoom() {
			var rooms = [];
			for (let i = 0; i < this.FormData.number; i++) {
				var str = String(i + 1).padStart(2, 0);
				var name = this.FormData.floor_no + str;
				rooms.push(name);
			}
			this.FormData.floor_rooms_no = rooms.join(',');
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				api.floorAdd(this.FormData).then((res) => {
					if (res.data.is_success) {
						uni.showToast({
							title: '添加成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: '添加失败',
							icon: 'none'
						});
					}
				});
			});
		},
		getBuild() {
			api.buildList({}).then((data) => {
				this.build = data.data;
			});
		}
	}
};
</script>

<style lang="scss">
.small {
	.roomNo {
		height: 50rpx;
		display: flex;
		padding: 20rpx 0;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		.label {
			font-size: 28rpx;
			color: #606266;
			width: 130rpx;
		}
		.value {
			flex: 1;
			font-size: 28rpx;
			text-align: right;
			padding-right: 20rpx;
			color: $uni-secondary-color;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
</style>
